<template>
  <div id="order-group-box" v-if="detail.id>0">
    <div class="custom-table custom-table-2">
      <div class="row">
        <div class="left">订单编号:</div>
        <div class="right" v-text="detail.orderNo"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">拼团状态:</div>
        <div class="right" v-text="detail.status.name"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">拼团人数:</div>
        <div class="right" v-text="detail.groupNums"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">当前人数:</div>
        <div class="right" v-text="detail.currNums"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">拼团时间:</div>
        <div class="right" v-text="detail.createdTime"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">拼团结束时间:</div>
        <div class="right" v-text="detail.endTime"></div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>

    <div class="custom-table">
      <div class="row">
        <div class="left">拼团商品:</div>
        <div class="right">
          <product-item :curr-product="{
              id:detail.productId,
              name:detail.productName,
              image:detail.productImage,
              price:detail.productPrice,
              model:detail.productModel,
              nums:1
            }"/>
        </div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>

    <div class="custom-table">
      <div class="row">
        <div class="left">参团列表:</div>
        <div class="right">
          <member-item :key="index" v-for="(member,index) in detail.joinOrderData" :curr-member="{
                icon:member.memberIcon,
                nickname:member.memberNickname,
              }"/>
        </div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>

    <div style="line-height: 30px; height: 30px; text-align: center">
      <my-button type="primary" v-if="detail.status.id===2 && (detail.isStart && detail.isStart.id===0)" :click="function (){cancel()}" text="取消团购订单" access-action="OrderGroup/manage"></my-button>
    </div>
  </div>
</template>

<script>
import ProductItem from './ProductItem'
import MemberItem from './MemberItem'
import MyButton from './MyButton'
export default {
  name: 'OrderGroupBox',
  components: {MyButton, MemberItem, ProductItem},
  props:{
    reloadDetail:Function,
    detail:Object
  },
  methods:{
    // 取消团购订单
    cancel: function () {
      let $this = this
      $this.$prompt('请输入 【团购】原因', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue:'团购商品不足',
        inputPattern: /^[\w\W]{1,100}$/,
        inputErrorMessage: '取消原因,长度在(1,100)位之间'
      }).then(({value}) => {
        if (value.length >100) {
          return $this.$message.warning('申请原因,必须在100个字符以内')
        }
        $this.MyRequest($this.ApiDoNameShop + 'Order/cancelOrderGroup', {id:$this.detail.id,cancelReason:value}, function (data) {
          $this.$props.reloadDetail()
          $this.$forceUpdate()
        }, function (data) {
          $this.$forceUpdate()
          $this.$message.error(data.message)
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
